<template>
  <div class="page page-tools">
    <h4 class="text-center">工 具 列 表</h4>
    <div class="page-main">
      <cmpToolsList></cmpToolsList>
    </div>
    <!-- 下方山水风景 -->
    <div class="scenery">
      <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
        <div class="scenery-left" v-if="showAnimate>0"></div>
      </transition>
      <transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutRight">
        <div class="scenery-right" v-if="showAnimate>0"></div>
      </transition>
      <transition enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
        <div class="scenery-bottom" v-if="showAnimate>0"></div>
      </transition>
    </div>
  </div>
</template>

<script>
import cmpToolsList from '@/components/cmp-tools-list.vue'
export default {
  name: 'tools',
  components: {
    cmpToolsList
  },
  data () {
    return {
      showAnimate: 0,
      showAnimateTimer: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initShowAnimateTimer()
    })
  },
  beforeRouteLeave (to, from, next) {
    if (to.name !== from.name) { this.showAnimate = 0 }
    this.$nextTick(() => { next() })
  },
  beforeDestroy () {
    clearInterval(this.showAnimateTimer)
  },
  methods: {
    initShowAnimateTimer () {
      clearInterval(this.showAnimateTimer)
      let count = 0
      let gap = 500
      this.showAnimateTimer = setInterval(() => {
        count += gap
        this.showAnimate = Math.floor(count / gap)
        if (this.showAnimate > 2) {
          clearInterval(this.showAnimateTimer)
        }
      }, gap)
    },
  }
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.page-tools {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  .page-main {
    height: 0;
    flex-grow: 1;
    margin-top: 1em;
    margin-bottom: 1em;
    overflow: hidden auto;
    position: relative;
    z-index: 2;
  }
  // 下方山水风景
  .scenery {
    .absolute-fullscreen;
    .scenery-bottom {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 11.2vw;
      background: url("~@/assets/images/public/home-lt-hill.png") no-repeat left bottom,
                  url("~@/assets/images/public/home-rt-hill.png") no-repeat right bottom;
      background-size: auto 100%;
    }
    .scenery-left {
      position: absolute;
      left: 0;
      bottom: 0;
      top: 0;
      width: 20vw;
      background: url("~@/assets/images/public/home-l-hill.png") no-repeat left bottom;
      background-size: 100% auto;
    }
    .scenery-right {
      position: absolute;
      right: 0;
      bottom: 0;
      top: 0;
      width: 11.2vw;
      background: url("~@/assets/images/public/home-r-tree.png") no-repeat right 60%;
      background-size: 100% auto;
    }
  }
}
</style>
